Bootstrap-展開Collapse & Accordion

概念

• 給予一個button
• 在collapse-content(事件作用目標物)上面給予一個id
• 在button標籤中，用bootstrap自訂屬性data-toggle定義觸發事件，以及與data-target定義作用的目標物
  

Collapse實作

• 預設值為關閉collapse狀態，若要預設為展開開狀態，可以添加show

  <div class="card">
      <button data-toggle="collapse" data-target="#collapse1"> 
          Button 1 
      </button>
      <div id="collapse1" class="collapse"
          Collapse-content-1
      </div>
  </div>

Accordion

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
                  Button 1 
            </div>
        </div>
        <div id="collapse1" class="collapse show">
            <div class="card-body">
                Collapse-content-1
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <div href='#collapse1' data-toggle="collapse" data-parent="#accordion">
                  Button 2 
            </div>
        </div>
        <div id="collapse2" class="collapse">
            <div class="card-body">
                Collapse-content-2
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <div href='#collapse3' data-toggle="collapse" data-parent="#accordion">
                  Button 3 
            </div>
        </div>
        <div id="collapse1" class="collapse">
            <div class="card-body">
                Collapse-content-3
            </div>
        </div>
    </div>

成果

My Project-LonelyPlanet-Mission section